<template>
    <div class="school">
        <h2>我是School组件</h2>
        <h4>学校名称：{{School.name}}</h4>
        <h4>学校地址：{{School.address}}</h4>
        <h4>学校电话：{{School.tel}}</h4>
        <h4>学校年龄：{{School.age}}</h4>
        <h4>下方Saying组件中语录的长度是：{{SayingList.length}}</h4>
        <select v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="incrementSchoolAge(n)">点我+</button>
    </div>
</template>

<script>
    import {
        mapState,
        mapMutations
    } from 'vuex';

    export default {
        name: 'School',
        data() {
            return {
                n: 1
            }
        },
        methods: {
            ...mapMutations({incrementSchoolAge: 'INCREMENT_SCHOOL_AGE'})
        },
        computed: {
            ...mapState(['School', 'SayingList'])
        }
    }
</script>

<style>
    .school {
        background-color: skyblue;
        padding: 20px;
    }
</style>